<template>
  <div class="custom-calendar-popup">
    <table class="calendar-table">
      <tbody>
        <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
          <td
            v-for="(cell, colIdx) in row"
            :key="colIdx"
            :class="cell.class"
            @click="cell.onClick && cell.onClick()"
          >
            {{ cell.text }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1; // 1-12
const startYear = currentYear - 10;
const endYear = currentYear + 10;

type CalendarCell = {
  text: string;
  class: string;
  onClick: (() => void) | null;
};

const rows = ref<CalendarCell[][]>(
  Array.from({ length: endYear - startYear + 1 }, (_, i) => {
    const year = startYear + i;
    return [
      {
        text: `${year}年`,
        class: year === currentYear ? 'selected' : '',
        onClick: null,
      },
      {
        text: `${currentMonth}月`,
        class: year === currentYear ? 'selected' : '',
        onClick: null,
      },
    ];
  })
);
</script>

<style scoped>
.custom-calendar-popup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  border: 1px solid #e4e7ed;
  padding: 18px 0 14px 0;
  min-width: 180px;
  min-height: 120px;
  display: inline-block;
}
.calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.calendar-table td {
  text-align: center;
  font-size: 17px;
  color: #222;
  background: transparent;
  border: none;
  padding: 7px 0;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.calendar-table td.selected {
  background: #e6f7f2;
  color: #18b3ab;
  font-weight: 600;
}
.calendar-table td.hovered {
  background: #f5f7fa;
  color: #bbb;
  font-weight: 500;
}
</style>
